<!DOCTYPE html>
<html lang="zxx">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>FoodKa - Food Ordering, Delivery & Restuarent Template</title>

    <!-- Stylesheet -->
    <link rel="stylesheet" href="static/css/animate.min.css">
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/magnific.min.css">
    <link rel="stylesheet" href="static/css/nice-select.min.css">
    <link rel="stylesheet" href="static/css/owl.min.css">
    <link rel="stylesheet" href="static/css/slick-slide.min.css">
    <link rel="stylesheet" href="static/css/fontawesome.min.css">
    <link rel="stylesheet" href="static/css/remixicon.css">
    <link rel="stylesheet" href="static/css/style.css">
    <link rel="stylesheet" href="static/css/responsive.css">

    <!--Google Fonts-->
    <link href="static/css/css2.css" rel="stylesheet">
    <script src="static/js/jquery.3.6.min.js"></script>

    <script>
        $(function () {
            load();
        })
        function load() {
            $.post("/Pizza_war_exploded/CartServlet/GetCartInfo", {},
                function (data) {
                    var tb = '';
                    var TPrice = 0;
                    for (var i = 0; i < data.length; i++) {
                        var li = '<tr>\n' +
                            '                                    <td class="table-close-btn"><a href="#" onclick="DeleteCart('+data[i].cart_id+')"><i class="ri-close-line"></i></a></td>\n' +
                            '                                    <th scope="row"><img src="' + data[i].food.food_img.pic + '" width="100" height="100" alt="img"></th>\n' +
                            '                                    <td colspan="2" class="item-name">\n' +
                            '                                        <div class="details">\n' +
                            '                                            <h5>' + data[i].food.fname + '</h5>\n' +
                            '                                            <ul>\n' +
                            '                                                <li><span>选择的尺寸: </span>' + data[i].size + '</li>\n' +
                            '                                            </ul>\n' +
                            '                                        </div>\n' +
                            '                                    </td>\n' +
                            '                                    <td>' + data[i].food.price + '</td>\n' +
                            '                                    <td class="table-quantity">\n' +
                            '                                        <form>\n' +
                            '                                            <div class="quantity buttons_added">\n' +
                            '                                                <input type="button" value="-" onclick="cartCut(' + data[i].cart_id +','+ data[i].sum + ')" class="minus">\n' +
                            '                                                <input type="text" class="input-text qty text"  value="' + data[i].sum + '">\n' +
                            '                                                <input type="button" value="+" onclick="cartAdd(' + data[i].cart_id +','+ data[i].sum + ')" class="plus">\n' +
                            '                                            </div>\n' +
                            '                                        </form>\n' +
                            '                                    </td>\n' +
                            '                                    <td>' + data[i].sum * data[i].food.price + '</td>\n' +
                            '                                </tr>';
                        tb += li;
                        TPrice += data[i].sum * data[i].food.price;
                    }
                    $(".Price").html("$" + TPrice);
                    $("#tBody").html(tb);
                }, "json");
        }
        function cartAdd(cart_id,sum){
            if (sum<100){
                $.post("/Pizza_war_exploded/CartServlet/CartAddNum",{cart_id:cart_id},
                    function (data){
                        load();
                    },"json");
            }
        }
        function cartCut(cart_id,sum){
            if (sum>1){
                $.post("/Pizza_war_exploded/CartServlet/CartCutNum",{cart_id:cart_id},
                    function (){
                        load();
                    },"json");
            }
        }
        function DeleteCart(cart_id){
            $.post("/Pizza_war_exploded/CartServlet/DeleteCartInfo",{cart_id:cart_id},
                function (){
                    load();
                },"json");
        }
    </script>
<!--
<div class="col-lg-4">
                    <div class="order-cart-area">
                        <div class="order-cart">
                            <h5>您的购物车</h5>
                            <ul>
                                <li>小记<span>$50.00</span></li>
                                <li class="total">总价<span>$50.00</span></li>
                            </ul>
                        </div>
                        <a class="btn btn-secondary w-100" href="#"> 确认订单</a>
                    </div>
                </div>
                -->
</head>
<body class='sc5'>
    <!-- preloader area start -->
    <div class="preloader" id="preloader">
        <div class="preloader-inner">
            <div id="wave1">
            </div>
            <div class="spinner">
                <div class="dot1"></div>
                <div class="dot2"></div>
            </div>
        </div>
    </div>
    <!-- preloader area end -->
    <!-- search popup area start -->
    <div class="body-overlay" id="body-overlay"></div>
    <div class="td-search-popup" id="td-search-popup">
<!--
        <form action="index.html" class="search-form">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search.....">
            </div>
            <button type="submit" class="submit-btn"><i class="fa fa-search"></i></button>
        </form>
-->
    </div>
    <!-- //. search Popup -->

    <!-- navbar start -->
    <div id="header"></div>
    <!-- navbar end -->

    <!-- bredcrumb Area Start-->
    <section class="breadcrumb-area">
        <div class="banner-bg-img"></div>
        <div class="banner-shape-1"><img src="static/picture/shape-1.png" alt="img"></div>
        <div class="banner-shape-2"><img src="static/picture/shape-1.png" alt="img"></div>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-6 align-self-center">
                    <div class="banner-inner text-center">
                        <h3>Cart Page
                        </h3>
                        <h1>Check your box
                        </h1>
                        <nav aria-label="breadcrumb">
                            <ul class="breadcrumb">
                              <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
                              <li class="breadcrumb-item active" aria-current="page">Cart</li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- bredcrumb Area End --> 

    <!-- cart area start -->
    <div class="cart-area pd-top-120 pd-bottom-120">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-12">
                    <div class="table-responsive mb-4">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th class="blank"></th>
                                    <th class="blank"></th>
                                    <th class="blank"></th>
                                    <th class="title-name">商品</th>
                                    <th scope="col">单价</th>
                                    <th scope="col">数量</th>
                                    <th>总价</th>
                                </tr>
                            </thead>
                            <tbody id="tBody">
                                <tr>
                                    <!--<td class="table-close-btn"><a href="#"><i class="ri-close-line"></i></a></td>-->
                                    <th scope="row"><!--<img src="static/picture/011.png" alt="img">--></th>
                                    <td colspan="2" class="item-name">
                                        <!--<div class="details">
                                            <h5>All Season Gulliver Pizza</h5>
                                            <ul>
                                                <li><span>Select Size: </span>Large</li>
                                                <li><span>Select Crust: </span>Double Crust</li>
                                            </ul>
                                        </div>-->
                                    </td>
                                    <td><!--$50.00--></td>
                                    <td class="table-quantity">
                                        <form>
                                            <div class="quantity buttons_added">
                                                <!--<input type="button" value="-" class="minus">
                                                <input type="number" class="input-text qty text" step="1" min="1" max="10000" name="quantity" value="1">
                                                <input type="button" value="+" class="plus">-->
                                            </div>
                                        </form>
                                    </td>
                                    <td><!--$40.00--></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>                    
                </div>
                <div class="col-lg-8">
                    <div class="promotional-area">
                        <form class="default-form-wrap">
                            <div class="row">
                                <!--<div class="col-md-4 col-sm-6">
                                    <div class="single-input-wrap">
                                        <input type="text" class="form-control" placeholder="Coupon Code">
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-6">
                                    <button type="submit" class="btn btn-secondary">APPLY COUPON</button>
                                </div>-->
                                <div class="col-md-4 col-sm-6 text-md-end">
                                    <button type="submit" class="btn btn-base">更新购物车</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="order-cart-area" id="checkCart">
                        <div class="order-cart">
                            <h5>您的购物车</h5>
                            <ul>
                                <li >小记<span class="Price">$0.00</span></li>
                                <li class="total">总价<span class="Price">$0.00</span></li>
                            </ul>
                        </div>
                        <a class="btn btn-secondary w-100" href="/Pizza_war_exploded/checkout.html"> 确认订单</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- cart area end -->

    <!-- footer area start -->
    <div id="footer"></div>
    <!-- footer area end -->    

    <!-- back-to-top end -->
    <div class="back-to-top">
        <span class="back-top"><i class="fas fa-angle-double-up"></i></span>
    </div>

    

    <!-- all plugins here -->

    <script src="static/js/jquery-ui.min.js"></script>
    <script src="static/js/bootstrap.min.js"></script>
    <script src="static/js/imageloded.min.js"></script>
    <script src="static/js/counterup.js"></script>
    <script src="static/js/waypoint.js"></script>
    <script src="static/js/magnific.min.js"></script>
    <script src="static/js/isotope.pkgd.min.js"></script>
    <script src="static/js/nice-select.min.js"></script>
    <script src="static/js/fontawesome.min.js"></script>
    <script src="static/js/owl.min.js"></script>
    <script src="static/js/slick-slider.min.js"></script>
    <script src="static/js/wow.min.js"></script>
    <script src="static/js/tweenmax.min.js"></script>
    <!-- main js  -->
    <script src="static/js/main.js"></script>
    <script type="text/javascript" src="static/js/include.js"></script>
</body>
</html>